<template>
  <div class="answersFirstTopic">
    <div>
      <h3><span class="red-line"></span>“第一议题”和党委中心组学习</h3>
    </div>
    <div>
      <template v-if="$store.state.datePickerShow">
        <van-popup v-model="calendarSelectorShow" >
          <van-datetime-picker
            ref="datePicker"
            type="date"
            v-model="defaultDate"
            visible-item-count="3"
            @confirm="dateTrue"
            @cancel="clearSelector"
            cancel-button-text="清除"
            style="border-radius: 10px"
          >
          </van-datetime-picker>
        </van-popup>
      </template>
    </div>
    <div class="div_background">
      <table class="answersFirstTopic_table">
        <caption>“第一议题”和党委中心组学习条件选择框</caption>
        <tr>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
        <tr>
          <td><span class="red-span">*</span>关键词</td>
          <td>
            <van-field v-model="meetingName" placeholder=""/>
          </td>
        </tr>
        <tr>
          <td>开始日期：&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td>
            <van-field type="text" v-model="meetingStartTime" placeholder="请选择日期" @click="showDateSelect('diYiStartDate', meetingEndTime)" readonly/>
          </td>
        </tr>
        <tr>
          <td>结束日期：&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td>
            <van-field type="text" v-model="meetingEndTime" placeholder="请选择日期" @click="showDateSelect('diYiEndDate', meetingEndTime)" readonly/>
          </td>
        </tr>
        <tr>
          <td>文档发布时间</td>
          <td>
            <van-field type="text" v-model="publishTime" placeholder="请选择日期" @click="showDateSelect('diYiPublishDate', publishTime)" readonly/>
          </td>
        </tr>
        <tr>
          <td><span class="red-span">*</span>规定完成时间</td>
          <td>
            <van-field type="text" v-model="finishTime" placeholder="请选择日期" @click="showDateSelect('diYiFinishDate', finishTime)" readonly/>
          </td>
        </tr>
        <tr>
          <td>是否需要研讨</td>
          <td>
            <input type="radio" name="check" @click="chooseDiscuss('true')"/>是
            <input type="radio" name="check" @click="chooseDiscuss('false')" checked/>否
          </td>
        </tr>
      </table>
      <div class="div_btn">
        <button class="btn_start" @click="startCheck">开始巡检</button>
      </div>
    </div>


  </div>
</template>

<script>

import dayjs from "dayjs";
import API from "@/api/api-chat-list";
import {setQueryInTellingPatrolInspect} from "@/utils/setChatStoreData";
import {isEmpty} from "@/common/util";
import Cookie from "@/utils/cookie";

export const DIYI_START_DATE = 'diYiStartDate';
export const DIYI_END_DATE = 'diYiEndDate';
export const DIYI_PUBLISH_DATE = 'diYiPublishDate';
export const DIYI_FINISH_DATE = 'diYiFinishDate';

export default {
  name: "AnswersFirstTopic",
  data() {
    return {
      meetingName: "",
      meetingStartTime: null,
      meetingEndTime: null,
      publishTime: null,
      finishTime: null,
      isDiscuss: 'false',
      defaultDate: new Date(),
      calendarSelectorShow: false,
      selectorDate: dayjs().format('YYYY-MM-DD'), // 日期选择器选中的时间
    }
  },
  methods: {
    chooseDiscuss(isDiscuss) {
      this.isDiscuss = isDiscuss;
    },
    async startCheck() {
      if (isEmpty(this.meetingName)) {
        this.$toast.fail("关键词不能为空");
        return null;
      }

      if (isEmpty(this.finishTime)) {
        this.$toast.fail("规定完成时间不能为空");
        return null;
      }

      // 查询条件全局保存，下载巡检结果时使用
      this.$store.state.firstTopicSearchData = {
        meetingName: this.meetingName,
        meetingStartTime: this.meetingStartTime,
        meetingEndTime: this.meetingEndTime,
        publishTime: this.publishTime,
        finishTime: this.finishTime,
        isDiscuss: this.isDiscuss,
        token: Cookie.getCookie('aitalk_token_zh') || ''
      };

      const param = {
        data: {
          meetingName: '',
          meetingTime: '',
        },
        dataLength: '',
        finishTime: this.finishTime,
        isDiscuss: this.isDiscuss,
        isFirst: false,
        meetingName: this.meetingName,
        publishTime: this.publishTime,
        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        name: this.$store.state.robotInfo.robotName,
        type: 'yitiQuery'
      };
      this.$store.state.firstTopicData = await API.queryByGroup(param);
      setQueryInTellingPatrolInspect(this, '“第一议题”和党委中心组学习开始巡检', 'diYiYiTiList');
    },
    dateTrue(day) {
      this.onConfirm(day)

      switch (this.dateType) {
        case DIYI_START_DATE:
          this.meetingStartTime = this.selectorDate;
          break;
        case DIYI_END_DATE:
          this.meetingEndTime = this.selectorDate;
          break;
        case DIYI_PUBLISH_DATE:
          this.publishTime = this.selectorDate;
          break;
        case DIYI_FINISH_DATE:
          this.finishTime = this.selectorDate;
          break;
        default:
          break;
      }

      this.calendarSelectorShow = false;
    },
    onConfirm(day) {
      this.selectorDate = dayjs(day).format('YYYY-MM-DD');
    },
    clearSelector() {
      switch (this.dateType) {
        case DIYI_START_DATE:
          this.meetingStartTime = null;
          break;
        case DIYI_END_DATE:
          this.meetingEndTime = null;
          break;
        case DIYI_PUBLISH_DATE:
          this.publishTime = null;
          break;
        case DIYI_FINISH_DATE:
          this.finishTime = null;
          break;
        default:
          break;
      }
      this.calendarSelectorShow = false;
    },
    async showDateSelect(type, date) {
      this.defaultDate = date ? new Date(date) : new Date();
      this.dateType = type;
      this.calendarSelectorShow = true;
      this.$store.state.datePickerShow =true;
    },
  }
}
</script>

<style type="text/css">
.answersFirstTopic h3 {
  color: red;
  font-size: 1.2em;
}
.answersFirstTopic h3 .red-line {
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #ff0000;
  margin-right: 12px;
  margin-top: 10px;
  border-radius: 5px;
}

.answersFirstTopic .div_background {
  border-radius: 10px;
  padding: 10px 5px;
}

.answersFirstTopic .red-span {
  color: red;
}

.answersFirstTopic_table tr:first-of-type, .answersFirstTopic_table caption {
  display: none;
}

.answersFirstTopic_table tr td {
  font-size: 14px;
  padding: 5px 0;
}

.answersFirstTopic_table tr td:first-of-type {
  width: 35%;
}

.answersFirstTopic_table tr td:last-of-type {
  padding: 5px 0;
}

.answersFirstTopic_table .van-cell{
  padding: 0;
}

.answersFirstTopic_table input[type=text] {
  border-radius: 3px;
  padding: 3px 6px;
  border: 1px solid #e8e8e8;
  width: 155px;
}

.answersFirstTopic_table input[type=date] {
  border-radius: 3px;
  padding: 4px 6px;
  border: 1px solid #e8e8e8;
  width: 160px;
}

.answersFirstTopic .div_btn {
  text-align: center;
  padding: 10px 0;
}

.answersFirstTopic .div_btn .btn_start {
  background-color: white;
  border-radius: 5px;
  border: 1px solid #ED2439;
  padding: 5px 10px;
  color: #ED2439;
  font-size: 1em;
}


.answersFirstTopic .van-popup {
  width: 75%;
  position: absolute;
  left: 42%;
  border-radius: 10px;
  top: 138px;
}

.answersFirstTopic .van-overlay {
  width: 124%;
  height: 450%;
  position: absolute;
  top: -178%;
  left: -21%;
}


.answersFirstTopic .van-datetime-picker {
  height: 178px;
  border-radius: 10px;
}

.answersFirstTopic .van-picker__toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  justify-content: space-around;
}

.answersFirstTopic .van-picker__toolbar .van-picker__cancel,.answersFirstTopic .van-picker__toolbar  .van-picker__confirm {
  border-radius: 15px;
  height: 70%;
}

.answersFirstTopic .van-picker__toolbar  .van-picker__confirm {
  border: 1px solid #ED2439;
  color: #ED2439;
}

.answersFirstTopic .van-picker__toolbar .van-picker__cancel {
  border: 1px solid gray;
  color: gray;
}
</style>


